<template>
  <div class="content">
    <div class="md-layout">
      <div class="md-layout-item md-xsmall-size-100 md-size-25">
        <md-field>
          <label>队列选择</label>
          <md-select v-model="taskque">
            <md-option v-for="item in taskQueList" :value="item.value" :key="item.id">{{ item.text }}</md-option>
          </md-select>
        </md-field>
      </div>
    </div>
    <div class="md-layout">
      <div id="cangotask" class="md-layout-item md-medium-size-50 md-xsmall-size-100 md-size-25" v-for="task in tasklist" :key="task.id">
          <div class="md-card md-card-stats md-theme-default cango-card" @click="jump(209144)">
            <div class="md-card-header cango-badge" data-background-color="red" v-if="task.delay">{{task.delay}}</div>
            <div class="md-card-content cango-task">
              <h4 class="title">{{task.id}}</h4>
              <p class="category">{{task.name}}</p>
              <p class="category">{{task.amount}}</p>
            </div>
            <div class="md-card-actions md-alignment-left">
              <div class="stats">
                <!-- md-icon>date_range</md-icon -->
                <!-- Last 24 Hours -->
                <span class="cango-tag cango-tag-alert" v-if="task.alert">加急</span>
                <span class="cango-tag cango-tag-org">{{task.bank}}</span>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
// import SearchParam from '@/views/Common/SearchParam.vue'
import router from '../router/index'
export default{
  components: {
    // 'query-condi-form':SearchParam
  },

  data () {
    return {
      taskque: 0,
      taskQueList: [
        {text: '创建未提交', value: '0'},
        {text: '退回待修改申请', value: '1'},
        {text: '待修改申请', value: '2'},
        {text: '申请退回', value: '3'},
        {text: '已拒绝', value: '4'},
        {text: '已取消', value: '5'},
        {text: '申请审批中', value: '6'},
        {text: '审批中需补充资料', value: '7'},
        {text: '未提交贷前资料（先抵）', value: '8'},
        {text: '未提交贷前资料（先放）', value: '9'},
        {text: '需补充贷前资料', value: '10'},
        {text: '放款审批中', value: '11'},
        {text: '放款后原件确认中', value: '12'},
        {text: '未提交贷后资料', value: '13'},
        {text: '需补充贷前原件', value: '14'},
        {text: '需补充登记证书', value: '15'},
        {text: '需补充贷后资料', value: '16'},
        {text: '业务认领', value: '17'}
      ],
      tasklist: [
        {id: 'BPA2061711034981', name: '张三丰', amount: '34245元 / 24月', bank: '晋城', alert: true, delay: 99},
        {id: 'BPA2061711034982', name: '张三丰', amount: '34245元 / 24月', bank: '微众', alert: true},
        {id: 'BPA2061711034983', name: '张三丰', amount: '34245元 / 24月', bank: '晋城', alert: true, delay: 10},
        {id: 'BPA2061711034984', name: '张三丰', amount: '34245元 / 24月', bank: '晋城', alert: true},
        {id: 'BPA2061711034985', name: '张三丰', amount: '34245元 / 24月', bank: '车家'},
        {id: 'BPA2061711034986', name: '张三丰', amount: '34245元 / 24月', bank: '晋城'},
        {id: 'BPA2061711034987', name: '张三丰', amount: '34245元 / 24月', bank: '晋城', delay: 11},
        {id: 'BPA2061711034988', name: '张三丰', amount: '34245元 / 24月', bank: '车家', delay: 9},
        {id: 'BPA2061711034989', name: '张三丰', amount: '34245元 / 24月', bank: '晋城'},
        {id: 'BPA2061711034980', name: '张三丰', amount: '34245元 / 24月', bank: '晋城'},
        {id: 'BPA2061711034991', name: '张三丰', amount: '34245元 / 24月', bank: '晋城'},
        {id: 'BPA2061711034992', name: '张三丰', amount: '34245元 / 24月', bank: '微众'},
        {id: 'BPA2061711034993', name: '张三丰', amount: '34245元 / 24月', bank: '微众'}
      ]
    }
  },
  methods: {
    getList: function (condi) {
      var _this = this
      this.$http({
        method: 'post',
        url: this.$root.remoteurl + '/article/test/listApply',
        dataType: 'json',
        data: condi
      }).then(function (res) {
        // alert(JSON.stringify(res.data.returnData));
        console.log(res.data.returnData.list)
        // Vue.set(data,'applylist', res.data.returnData.list)
        _this.applylist = res.data.returnData.list
      })
    },
    gotodetail2 (applycd) {
      // alert(applycd)
      this.$router.push({path: '/applyinfo/' + applycd})
    },
    jump (url) {
      router.push('/')
    }
  },
  mounted: function () {
    if (this.$route.query.flg === '1') {
      this.getList(this.querycondi)
    }
  }
}
</script>

<style>

.cango-card {
    margin: 10px 0;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #4caf50;
    cursor:pointer;
}
.cango-card:hover {
    background-color:#EEEEEE;
}
#cangotask>.md-card-stats .cango-task {
    text-align: left;
}
.cango-tag-alert {
    color: white;
    background-color: orange ;
    background-image: none;
}
.cango-tag-org {
    color: white;
    background-color: #36c6d3;
    background-image: none;
}
.cango-tag {
    font-size: 11px !important;
    font-weight: 300;
    text-align: center;
    padding: 3px 6px 3px 6px;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
    text-shadow: none !important;
    text-align: center;
    vertical-align: middle;
}
#cangotask>.md-card-stats .cango-badge {
    float: left;
    text-align: center;
}
#cangotask>.md-card .cango-badge {
    border-radius: 40px;
    padding: 5px;
    margin: 0px;
    min-width: 30px;
}
.cango-badge {
    position: absolute;
    right: -13px;
    top: -13px;
}
</style>
